<!doctype html>
<html lang="zh-CN" style="height:100%">
<head>
<meta charset="utf-8">
<title>canvas-其他方法</title>
</head>

<body style="height:100%">
<canvas id="canvas1" style="border:1px solid #ccc">不支持canvas</canvas>

<script>
var WINDOW_WIDTH,WINDOW_HEIGHT;

window.onload = function(){
	var canvas1 = document.getElementById("canvas1");
	//2d绘图模式
	var context1 = canvas1.getContext("2d");

	//为 context1 对象增加自定义方法
	CanvasRenderingContext2D.prototype.angleLine = function(x,y,angle,len){
		//绘制一条指定角度的线段
		//angle 角度 - x 轴顺时针方向
		//len 长度
		this.beginPath();
		this.lineTo(x,y);
		this.lineTo(x + len * Math.cos(Math.PI*angle/180),y + len * Math.sin(Math.PI*angle/180));
		this.stroke();
	}

	//自适应配置
	WINDOW_WIDTH = document.body.clientWidth;
	WINDOW_HEIGHT = document.body.clientHeight;

	canvas1.width = WINDOW_WIDTH;
	canvas1.height = WINDOW_HEIGHT;

	context1.lineWidth = 2;
	context1.lineTo(100,50);
	context1.lineTo(200,50);
	context1.stroke();
	context1.angleLine(100,50,45,100);

};
</script>

</body>
</html>